<template>
  <div class="page-home">
    <div class="header">
      <img src="@/assets/home/header.jpg" class="animate__pulse animate__animated animate__infinite animate__slower ">
      <div class="logo">
        <img src="@/assets/home/logo.png">
      </div>
      <div class="my-button" @click="my.open()">
        <img src="@/assets/home/my.png">
      </div>
    </div>
    <div class="content">
      <div class="menu">
        <div class="item" @click="router.push('/box')">
          <img src="@/assets/home/box.png">
        </div>
        <div class="item" @click="routeUnion">
          <img src="@/assets/home/union.png">
        </div>
        <div class="item" @click="router.push('/nft')">
          <img src="@/assets/home/nft.png">
        </div>
      </div>
      <div class="menu min">
        <div class="item" @click="router.push('/vote')">
          <img src="@/assets/home/vote.png">
        </div>
        <div class="item" @click="router.push('/dao')">
          <img src="@/assets/home/dao.png">
        </div>
        <div class="item" @click="router.push('/hash')">
          <img src="@/assets/home/hash.png">
        </div>
        <div class="item" @click="router.push('/token')">
          <img src="@/assets/home/token.png">
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="box">
        <img src="@/assets/home/footer.png" alt="">
      </div>
      <div class="list">
        <div class="item" @click="haibao.open()">
          <img src="@/assets/home/qrcode.png">
        </div>
        <div class="item">
          <img src="@/assets/home/share.png">
        </div>
        <div class="item">
          <img src="@/assets/home/twitter.png">
        </div>
        <div class="item">
          <img src="@/assets/home/about.png">
        </div>
      </div>
    </div>
  </div>
  <My ref="my" />
  <Haibao ref="haibao" />
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { unionHas } from '@/model/user'
import { toast } from '@/style'
import { t } from '@/lang'
import My from './my.vue'
import Haibao from './haibao.vue'

const router = useRouter()
const my = ref(null)
const haibao = ref(null)

const routeUnion = () => {
  if(unionHas()) {
    router.push('/union')
  } else {
    router.push('/union/buy')
  }
}

</script>

<style lang="scss" scoped>
  .page-home{
    min-height: 100%;
    background: #0f0041;

    .header{
      width: 100%;
      position: relative;
      overflow: hidden;

      img{
        width: 100%;
      }
      .logo{
        width: 120px;
        position: absolute;
        left:0;
        right: 0;
        top: 40px;
        margin:0 auto;
      }
      .my-button{
        width: 40px;
        position: absolute;
        left: 25px;
        top: 30px;
      }
    }

    .footer{
      width:350px;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;

      .box{
        padding: 0 20px 20px;
        img{
          width: 100%;
        }
      }

      .list{
        width: 100%;
        display: flex;
        justify-content: center;
        position: absolute;
        top: 25px;

        .item{
          width: 20%;
          text-align: center;

          img{
            height: 20px;
          }
        }
      }
    }

    .content{
      padding: 0 20px 100px;
    }

    .menu{
      width: 100%;
      display: flex;
      justify-content: space-around;
      padding-bottom: 30px;

      &.min{
        .item{
          width: 18%;
        }
      }

      .item{
        width: 25%;

        img{
          width: 100%;
        }
      }
    }
  }
</style>